<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>材料上传<span> (*是必填项)</span></h1>
        <div class="user-info-box">
          <el-form
            ref="ruleForm"
            :rules="rules"
            label-position="right"
            label-width="135px"
            :model="ruleForm"
          >
            <el-form-item label="企业logo：" prop="logoImg">
              <el-input
                v-model="ruleForm.logoImg"
                class="show-box"
                :disabled="true"
              ></el-input>
              <i v-if="ruleForm.logoImg" class="el-icon-success"></i>
              <UploaderOss
                @uploadFile="uploadFilePath"
                :file-path="ruleForm.logoImg"
                :file-info="fileInfo"
                show-title="企业logo"
                upload-id="logoImg"
              ></UploaderOss>
            </el-form-item>
            <el-form-item label="报名表：" prop="application">
              <el-input
                v-model="ruleForm.application"
                class="show-box"
                :disabled="true"
              ></el-input>
              <i v-if="ruleForm.application" class="el-icon-success"></i>
              <UploaderOss
                @uploadFile="uploadFilePath"
                :file-path="ruleForm.application"
                :file-info="fileInfo"
                show-title="报名表"
                upload-id="application"
              ></UploaderOss>
            </el-form-item>
            <el-form-item label="展示材料：" prop="ppt">
              <el-input
                v-model="ruleForm.ppt"
                class="show-box"
                :disabled="true"
              ></el-input>
              <i v-if="ruleForm.ppt" class="el-icon-success"></i>
              <UploaderOss
                @uploadFile="uploadFilePath"
                :file-path="ruleForm.ppt"
                :file-info="fileInfo"
                show-title="展示材料"
                upload-id="ppt"
              ></UploaderOss>
              <p class="user-title-tips">PPT,WORD等材料，可打包上传</p>
            </el-form-item>
            <el-form-item label="项目展示图片：" prop="showImg">
              <el-input
                v-model="ruleForm.showImg"
                class="show-box"
                :disabled="true"
              ></el-input>
              <i v-if="ruleForm.showImg" class="el-icon-success"></i>
              <UploaderOss
                @uploadFile="uploadFilePath"
                :file-path="ruleForm.showImg"
                :file-info="fileInfo"
                show-title="项目展示图片"
                upload-id="showImg"
              ></UploaderOss>
            </el-form-item>
            <el-form-item
              class="two-line width-80"
              label="企业或项目展示视频："
              prop="video"
            >
              <el-input
                v-model="ruleForm.video"
                class="show-box"
                :disabled="true"
              ></el-input>
              <i v-if="ruleForm.video" class="el-icon-success"></i>
              <UploaderOss
                @uploadFile="uploadFilePath"
                :file-path="ruleForm.video"
                :file-info="fileInfo"
                show-title="企业或项目展示视频"
                upload-id="video"
              ></UploaderOss>
            </el-form-item>
          </el-form>
          <!-- <div class="submit-box">
            <el-button class="submit" @click="submit()" type="primary"
              >提交</el-button
            >
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyUploader from "@/components/MyUploader";
import UploaderOss from "@/components/UploaderOss";
import UserLeft from "./components/UserLeft";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    UserLeft,
    MyUploader,
    UploaderOss,
  },
  data() {
    return {
      ruleForm: {
        logoImg: "",
        application: "",
        ppt: "",
        showImg: "",
        video: "",
      },
      rules: {
        logoImg: [
          { required: true, message: "请上传企业logo", trigger: "blur" },
        ],
        application: [
          { required: true, message: "请上传报名表", trigger: "blur" },
        ],
        ppt: [{ required: true, message: "请上传展示ppt", trigger: "blur" }],
        showImg: [
          { required: true, message: "请上传项目展示图片", trigger: "blur" },
        ],
      },
      logoType: {
        type: 1, //1:企业logo; 2:报名表; 3:项目介绍; 4:项目图片; 5:展示视频; 6:其他
      },
      showNumber: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions(["projectSave", "getUserInfo", "uploadFile"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.logoImg = this.userProjectInfo.logo_url;
        this.ruleForm.application = this.userProjectInfo.enroll_form_url;
        this.ruleForm.showImg = this.userProjectInfo.pic_url;
        this.ruleForm.ppt = this.userProjectInfo.ppt_url;
        this.ruleForm.video = this.userProjectInfo.video_url;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            logo_url: this.ruleForm.logoImg,
            enroll_form_url: this.ruleForm.application,
            pic_url: this.ruleForm.showImg,
            ppt_url: this.ruleForm.ppt,
            video_url: this.ruleForm.video,
          };
          this.projectSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    removeFile(removeInfo) {
      console.log(removeInfo);
    },
    uploadFilePath(uploadFile) {
      this.ruleForm[uploadFile.uploadId] = uploadFile.fileAddress;
      let data = {};
      if (uploadFile.uploadId == "logoImg") {
        data = {
          logo_url: this.ruleForm.logoImg,
        };
      } else if (uploadFile.uploadId == "application") {
        data = {
          enroll_form_url: this.ruleForm.application,
        };
      } else if (uploadFile.uploadId == "showImg") {
        data = {
          pic_url: this.ruleForm.showImg,
        };
      } else if (uploadFile.uploadId == "ppt") {
        data = {
          ppt_url: this.ruleForm.ppt,
        };
      } else if (uploadFile.uploadId == "video") {
        data = {
          video_url: this.ruleForm.video,
        };
      }
      this.projectSave(data).then((res) => {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.getUserInfo();
      });
    },
  },
  computed: {
    ...mapGetters(["userProjectInfo", "userInfo", "userCompanyInfo"]),
    fileInfo() {
      let data = {
        match_number: this.userInfo.match_number,
        company_title: this.userCompanyInfo.title,
      };
      return data;
    },
  },
};
</script>

<style scoped>
.user-info-box {
  padding-right: 250px;
}
.two-line >>> .el-form-item__label {
  line-height: 20px;
}
.width-80 >>> .el-form-item__label {
  padding-left: 40px;
  width: 95px;
}
.user-info-box >>> .el-select {
  width: 100%;
}
.user-info-box >>> .el-icon-success {
  font-size: 24px;
  color: green;
  line-height: 40px;
  margin-left: 5px;
}
.show-box {
  width: 400px;
}
</style>